<template>
  <div id="app">
    <div class="header">
      <!-- 头部logo部分 -->
      <div class="header_logo">
        <div class="header_wenb">
          <div class="left_div">
            <span>&#xe605;</span>
            <p>网易云音乐</p>
          </div>
          <div class="right_div">
            <span>下载APP</span>
          </div>
        </div>
      </div>
      <!-- 选项卡 -->
          <div class="header_kuai">
           <div class="header_xxk" v-for="(item,index) in titles" :key="index">
              <a  :class="title==index?'cur':'' "  @click="title=index" >{{item.name}}</a>
           </div>
          </div>
    </div>
       <!-- 动态组件 -->
    <div class="zujian">
    <keep-alive>
          <component v-bind:is="titles[title].path"></component>
     </keep-alive>
    </div>
  </div>
</template>

<script>
import Tj from './All/tj.vue'
import Rg from './All/rg.vue'
import Ss from './All/ss.vue'
export default {
  // name: 'App',
  data () {
    return {
        title:0,
       titles:[
        {name:'推荐音乐' , path:'Tj' },
        {name:'热歌榜' , path:'Rg'},
        {name:'搜索' , path:'Ss'}
      ]
    }
  },
  methods:{
    
  },
  components:{
     Ss,
     Tj,
     Rg
  }
}
</script>

<style scoped>
#id{
  width:100%;
}
.header{
  position:fixed;
  top:0;
  left:0;
  z-index:100;
  width:100%;
  background-color: white;
}
.header_logo{
  width:100%;
  background-color:#D43C33 ;
}
.header_wenb{
  width:100%;
  height:84px;
  padding:0px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.left_div{
  display:flex;
  align-items: center;
}
.left_div>span{
  font-family:'wy';
  font-size:20px;
  margin-right:20px;
}
.left_div>p{
  color:white;
  font-size: 20px;
  letter-spacing:2px;
}
.right_div{
  width:100px;
  height:36px;
  border-radius:36px;
  background-color: white;
  text-align: center;
  line-height: 36px;
  color:#D43C33;
 font-size:16px;
}
.header_xxk{
 flex-grow: 1;
 text-align: center;
}

.header_kuai{
 display:flex;
  width:100%;
  border-bottom: 1px solid #ddd;
}
.header_xxk>a{
    display: inline-block;
    line-height: 40px;
    height:40px;
    text-decoration: none;
    padding:0 10px;
    color: #000;

}
.cur{
    color:#D43C33 !important;
    border-bottom:2px solid #D43C33;
}
.zujian{
    padding-top:135px;
}
</style>
